<template>
    <div >
        <div class="login"><!--这里是要展示的内容层-->
          <div class="popupcontents">
            <div id="map"></div>
            <div class="sermap">
              <div id="r-result">
                <input type="text"  id="suggestId" size="20" placeholder="请输入地址"/>
                <button @click="Toqueren">确定</button>
              </div>
	            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            </div>
            <el-dialog title="门牌号输入" :visible.sync="dialogFormVisible">
                <el-input :value="mechanism_addr" disabled ></el-input>
                <el-input v-model="mechanism_addrs" placeholder="请输入门牌号"  class="qtrs"></el-input>
              <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="toeixs()">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div><!--这里是半透明背景层-->
        <div class="over" @click="toclose"></div>
      </div>
</template>
<script>
export default {
    data(){
        return{
            longitude:'',
            dialogFormVisible:false,
            mechanism_addr:'',
            latitude:'',
            mechanism_addrs:'',
            props:['mechanism_addr','Isshow','latitude','longitude']
        }
    },
    mounted(){
        this.mapshows()
    },
    
    methods:{
        toclose(){
            this.Isshow = false
            this.dialogFormVisible = false
            this.$emit("update:Isshow",this.Isshow)
        },
        toeixs(){
            this.Isshow = false
            console.log(this.latitude,'000')
            this.dialogFormVisible = false
            var addres = this.mechanism_addr +this.mechanism_addrs
            this.$emit("update:Isshow",this.Isshow)
            this.$emit("update:mechanism_addr",addres)
            this.$emit("update:latitude",this.latitude)
            this.$emit("update:longitude",this.longitude)
        },
    Toqueren(){
      if(this.mechanism_addr == ''){
        this.$message('请选择机构地址');
      }else{
        this.dialogFormVisible  = true
      }
      
    },
    mapshows(){
      var _this = this
      var longitude =  localStorage.getItem('longitude')
      var  latitude =  localStorage.getItem('latitude')
      var map = new BMap.Map("map");    // 创建Map实例
      var myGeo = new BMap.Geocoder();
      var point = new BMap.Point(longitude,latitude);
      var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId","location" : map}
      );
      ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
      });
      var myValue;
      ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
      });
      function G(id) {
        return document.getElementById(id);
      }
      function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
          var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
          map.centerAndZoom(pp, 18);
          map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
      }
      map.centerAndZoom(point,19);
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
        }else {
          alert('failed'+this.getStatus());
        }        
      },{enableHighAccuracy: true})
      map.addEventListener("click", function(e){  
        map.clearOverlays();      
        var pt = e.point;
        _this.longitude =pt.lng
        _this.latitude = pt.lat
        var marker = new BMap.Marker(new BMap.Point(_this.longitude, _this.latitude = pt.lat));
        map.addOverlay(marker);            //增加点
        myGeo.getLocation(pt, function(rs){
          var addComp = rs.addressComponents;
          _this.mechanism_addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
          _this.dialogFormVisible  = true
        });        
      });
       map.centerAndZoom(new BMap.Point(longitude, latitude), 19);// 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({// 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_RIGHT,// LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);// 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e){// 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
      });
      geolocationControl.addEventListener("locationError",function(e){// 定位失败事件
        alert(e.message);
      });
      map.addControl(geolocationControl);
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放	 
    }
  }
}
</script>
<style lang="less" scoped>
    /*弹窗样式*/
  .login {
    position: fixed;
    font-size: 24px;
    height: 576px;
    width: 1063px;
    border-radius:10px;
    background-color: #ffffff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2405;
  }
  .over{
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
  }
  .popupcontents{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .popupcontents>#map{
    width: 1063px;
    height: 576px;
    overflow: hidden;
    border-radius: 20px;
  }
  //弹窗结束
   .sermap{
    position: absolute;
    width: 500px;
    height: 50px;
    left: 20px;
    top: 10px;
    // background: #eeeeee;
    display: flex;
    align-items: center ;
  }
  #map{
    z-index: 1000;
  }
  .sermap button{
    width: 80px;
    height: 38px;
    cursor: pointer;
    background: #47cecf;
    outline: none;
    border: none;
    border-radius: 0 6px 6px 0;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.4);
  }
  #suggestId{
    box-sizing: border-box;
    width: 360px;
    border: 0;
    padding: 9px 0;
    border-left: 10px solid transparent;
    border-right: 27px solid transparent;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    outline: none;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.4);
    border-radius: 6px 0 0 6px;
  }
  .qtrs{
      margin-top: 30px;
  }
  .BMap_stdMpCtrl{
      top: 100px!important;
  }
  .popupcontents>.el-dialog__wrapper>.el-dialog>.el-el-dialog__footer>.dialog-footer> .el-button--primary {
    width:50%;
  }
</style>